<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.combobox</title>
<link rel="stylesheet" type="text/css" href="../themes/default/tooltip.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/combobox.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/validatebox.css" />
<script type="text/javascript" src="../jquery-1.10.2.js">
</script>
<script type="text/javascript" src="../src/jquery.parser.js">
</script>
<script type="text/javascript" src="../src/jquery.tooltip.js">
</script>
<script type="text/javascript" src="../src/jquery.validatebox.js">
</script>
<script type="text/javascript" src="../src/jquery.combobox.js">
</script>
<style>
	.mycombobox {
		border: 1px solid #95bbe7;
		-moz-border-radius: 5px 5px 5px 5px;
		-webkit-border-radius: 5px 5px 5px 5px;
		border-radius: 5px 5px 5px 5px;
		height: 20px; 
		padding-right: 16px;
		background: url('../themes/default/images/combo_arrow.gif') no-repeat right;
		cursor: default;
		opacity: 0.8;
		filter: alpha(opacity=80);
	}
	
	.mycombobox:hover {
		opacity: 1.0;
		filter: alpha(opacity=100);
	}
</style>
</head>
<body>
<div>
  <a href="#" onclick="onClickEnable()">启用</a> <a href="#" onclick="onClickDisable()">禁用</a>
</div>
<br>
<span class="combobox">
<input type="text" class="combobox-text">
<input type="hidden" name="value" class="combobox-value">
<span class="combobox-addon"> <i class="combobox-icon combobox-arrow"></i> </span> </span> <br>
<br>
<span class="combobox">
<input class="combobox-text"  type="text">
<input name="state" class="combobox-value" type="hidden">
</span>
<input type="text" name="value" class="xui-combobox" data-options="initDom:true,formatter:formatText">

<span class="combobox"><input type="text" class="combobox-text combobox-f validatebox-text"><input type="hidden" class="combobox-value" name="value" value=""><span class="combobox-addon"><i class="combobox-icon combobox-arrow"></i></span></span>

<input type="text" name="value" class="mycombobox">
<script type="text/javascript">
	$(function() {
		$('.combobox, .xui-combobox').combobox({
			 panelHeight:100,
			 //multiple:true,
			disabled:true,
			novalidate: true,
			required: true,
			data:[
				{text:'1',value:'1'},
				{text:'2',value:'2'},
				{text:'3',value:'3'},
				{text:'4',value:'4'},
				{text:'5',value:'5'},
				{text:'6',value:'6'},
				{text:'7',value:'7'},
				{text:'8',value:'8'},
				{text:'9',value:'9'},
				{text:'11',value:'11'},
				{text:'12',value:'12'},
				{text:'13',value:'13'},
				{text:'14',value:'14'},
				{text:'15',value:'15'},
				{text:'16',value:'16'},
				{text:'17',value:'17'},
				{text:'18',value:'18'},
				{text:'19',value:'19'}
			]
		});
	});
	
	function onClickEnable () {
		$('.combobox-f').combobox({disabled:false});
	}
	
	function onClickDisable () {
		$('.combobox-f').combobox({disabled:true});
	}
	
	function formatText(row) {
        var opts = $(this).combobox('options');
        return row[opts.valueField]+'-'+row[opts.textField];
    }

</script>
</body>
</html>